<template>
  <div id="specTraceRec">
    <Breadcrumb content="条码状态跟踪" />
    <div class="bodyContent">
      <splitpanes class="area">
        <!-- 查询条件 -->
        <pane size="20">
          <div v-loading="Floading">
            <el-scrollbar style="height: 100%">
              <el-form :model="form" label-width="100px">
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="条码号">
                      <el-input ref="specCodeInput" type="text" v-model="form.reqNo" placeholder="请输入条码号" @keyup.enter="keyupEnter" clearable> </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="病历号">
                      <el-input type="text" v-model="form.patNo" placeholder="请输入病历号" clearable @keyup.enter="keyupEnter"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="床号">
                      <el-input type="text" v-model="form.bedNo" placeholder="请输入床号" clearable @keyup.enter="keyupEnter"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="姓名">
                      <el-input type="text" v-model="form.patNa" placeholder="请输入姓名" clearable @keyup.enter="keyupEnter"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item prop="reqDeptNa" label="科室">
                      <SelectDataList
                        ref="employeeSelectRef"
                        :url="'/api/sys/getDepartmentList'"
                        :displayField="[
                          { title: '科室编码', props: 'code' },
                          { title: '科室名称', props: 'name' }
                        ]"
                        :title="'点击选择科室'"
                        :searchParam="{ orgId: orgId }"
                        @selectDataRow="SelectRowDeptClick"
                        :inputWidth="'100%'"
                        v-model="form.reqDeptName"
                        :placeholder="'选择科室'"
                        @clearValue="clearDeptName"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item prop="stateNa" label="状态">
                      <SelectDataList
                        ref="stateNaSelectRef"
                        :url="'/lab/process/set/getProcessSetList'"
                        :displayField="[
                          { title: '编码', props: 'code' },
                          { title: '名称', props: 'nodeName' }
                        ]"
                        :title="'点击选择状态'"
                        :searchParam="{ orgId: orgId }"
                        @selectDataRow="SelectStateClick"
                        :inputWidth="'100%'"
                        v-model="form.stateNa"
                        :placeholder="'选择状态'"
                        @clearValue="clearStateNa"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="病人类型" prop="patTypeName">
                      <SelectDataList
                        ref="employeeSelectRef"
                        :url="'/api/sys/basDictDetail/findDictDetailList'"
                        :displayField="[
                          { title: '编码', props: 'code' },
                          { title: '名称', props: 'name' }
                        ]"
                        :title="'点击选择病人来源'"
                        :searchParam="{ code: 'PATTYPE' }"
                        @selectDataRow="SelectRowClick"
                        :inputWidth="'100%'"
                        v-model="form.patTypeName"
                        :placeholder="'选择病人来源'"
                        @clearValue="clearPatTypeName"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="时间类型" prop="patTypeName">
                      <el-select v-model="form.timeType" placeholder="选择时间类型">
                        <el-option v-for="item in timeTyptList" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="开始日期">
                      <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" align="right" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :shortcuts="shortcuts"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item label="结束日期">
                      <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" align="right" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :shortcuts="shortcuts"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="23">
                    <el-form-item>
                      <el-button type="primary" plain @click="handleSearch()">查询</el-button>
                      <el-button type="primary" plain @click="exportExcelReport('#printTest', '')">导出</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- <el-form-item label="申请时间">
                <el-date-picker v-model="form.startTime" type="datetime" style="width: 100%"
                  placeholder="选择开始时间" :format="'yyyy-MM-dd HH:mm:ss'" :value-format="'yyyy-MM-dd HH:mm:ss'" align="right"
                  :picker-options="pickerOpts"> </el-date-picker>
                <el-date-picker v-model="form.endTime" type="datetime" style="width: 100%"
                  placeholder="选择结束时间" :format="'yyyy-MM-dd HH:mm:ss'" :value-format="'yyyy-MM-dd HH:mm:ss'"
                  align="right"> </el-date-picker>
              </el-form-item> -->
              </el-form>
            </el-scrollbar>
          </div>
        </pane>
        <pane size="80">
          <splitpanes horizontal>
            <pane size="30">
              <div class="tableBox">
                <vxe-table ref="supplierTableRef" class="mytable-scrollbar supplierTableClazz" border align="left" height="auto" :data="specList" :loading="Sloading" @current-change="supplierRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :row-style="rowStyle" resizable show-overflow keep-source>
                  <vxe-column field="patTypeNa" title="病人类型" width="80"> </vxe-column>
                  <vxe-column field="reqNo" title="申请号" width="80"> </vxe-column>
                  <vxe-column field="bedNo" title="床号" width="80"> </vxe-column>
                  <vxe-column field="diagnose" title="临床诊断" width="80"> </vxe-column>
                  <vxe-column field="reqPurpose" title="申请目的" width="80"> </vxe-column>
                  <vxe-column field="stateNa" title="状态" width="80"> </vxe-column>
                  <vxe-column field="patNo" title="病历号" width="80"> </vxe-column>
                  <vxe-column field="patNa" title="姓名" width="80"> </vxe-column>
                  <vxe-column field="sex" title="性别" width="80">
                    <template #default="{ row }">
                      <span> {{ row.sex === '1' ? '男' : row.sex === '2' ? '女' : '未知' }}</span>
                      <span></span>
                    </template>
                  </vxe-column>
                  <vxe-column field="age" title="年龄" width="80"> </vxe-column>
                  <vxe-column field="sampleTypeNa" title="样本类型" width="80"> </vxe-column>
                  <vxe-column field="reqDeptNa" title="申请科室" width="80"> </vxe-column>
                  <vxe-column field="reqDoctorName" title="申请医生" width="80"> </vxe-column>
                  <vxe-column field="reqTime" title="申请时间" width="115">
                    <template #default="{ row }">
                      <span>{{ formatDateTime(row.reqTime, 'yyyy-MM-dd hh:mm') }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="printTime" title="条码打印时间" width="115">
                    <template #default="{ row }">
                      <span>{{ formatDateTime(row.printTime, 'yyyy-MM-dd hh:mm') }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="printerNa" title="打印人" width="80"> </vxe-column>
                  <vxe-column field="samplingTime" title="采样时间" width="115">
                    <template #default="{ row }">
                      <span>{{ formatDateTime(row.samplingTime, 'yyyy-MM-dd hh:mm') }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="samplingDoctorNa" title="采样医师" width="80"> </vxe-column>
                  <!-- <vxe-column field="supplierCode" title="标本送达时间" width="80"> </vxe-column> -->
                  <vxe-column field="signTime" title="签收时间" width="115">
                    <template #default="{ row }">
                      <span>{{ formatDateTime(row.signTime, 'yyyy-MM-dd hh:mm') }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column field="signerNa" title="签收医生" width="80"> </vxe-column>
                  <!-- <vxe-column field="supplierCode" title="取消审核日期" width="80"> </vxe-column>
                <vxe-column field="supplierCode" title="取消审核人" width="80"> </vxe-column>
                <vxe-column field="supplierCode" title="取消审核原因" width="80"> </vxe-column> -->
                  <!-- <vxe-column field="cancelDoctorNa" title="作废人" width="80"> </vxe-column>
                <vxe-column field="cancelTime" title="作废时间" width="80"> </vxe-column>
                <vxe-column field="cancelReason" title="作废原因" width="80"> </vxe-column> -->
                  <!-- <vxe-column field="supplierCode" title="销毁人" width="80"> </vxe-column>
                <vxe-column field="supplierCode" title="销毁日期" width="80"> </vxe-column> -->
                </vxe-table>
              </div>
              <div>
                <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>
              </div>
            </pane>

            <pane size="70">
              <splitpanes class="area">
                <pane size="18">
                  <el-scrollbar style="height: 100%; width: 100%">
                    <el-card shadow="never">
                      <div class="timelineBox">
                        <el-timeline :reverse="true" style="height: auto; padding-left: 10px">
                          <el-timeline-item v-for="(activity, index) in stepList" type="info" :key="index" :timestamp="activity.operateTime"
                            ><!-- 属性控制是否空心 :hollow="activity.completed" -->
                            <!-- {{ activity.stepName }} -->
                            <p>{{ activity.stateName }}</p>
                            <p>{{ '操作人:' + activity.operator }}</p>
                          </el-timeline-item>
                        </el-timeline>
                      </div>
                    </el-card>
                  </el-scrollbar>
                </pane>
                <pane size="82">
                  <el-tabs type="border-card">
                    <el-tab-pane label="检验项目">
                      <el-scrollbar height="100%">
                        <div class="padding-lr">
                          <el-card v-for="(item, index) in specResult" :key="index" style="height: 100%" class="margin-top">
                            <el-descriptions :column="4" border size="small">
                              <el-descriptions-item label="报告单元" width="150px">
                                {{ item ? item.insName : '' }}
                              </el-descriptions-item>
                              <el-descriptions-item label="检测日期" width="150px">
                                {{ item ? item.testTime : '' }}
                              </el-descriptions-item>
                              <el-descriptions-item label="样本号" width="150px">
                                {{ item ? item.ybCode : '' }}
                              </el-descriptions-item>
                            </el-descriptions>
                            <div v-for="(val, idx) in item.labFeeItemRptresultDto" :key="idx" style="height: 100%">
                              <el-descriptions :column="4" border size="small">
                                <el-descriptions-item label="申请项目" width="150px">
                                  {{ val.itemName ? val.itemName : '' }}
                                </el-descriptions-item>
                              </el-descriptions>
                              <Breadcrumb content="报告项目" />
                              <el-table v-loading="Rloading" row-key="id" :data="val.labRptresults" style="width: 100%" height="calc(100% - 65px)" border>
                                <el-table-column label="项目代号" prop="itemNo" width="160" show-overflow-tooltip> </el-table-column>
                                <el-table-column label="项目名称" prop="itemNa" width="160" show-overflow-tooltip> </el-table-column>
                                <el-table-column label="检测结果" prop="testResult" width="160" show-overflow-tooltip> </el-table-column>
                                <el-table-column label="参考值" prop="ref" width="160" show-overflow-tooltip> </el-table-column>
                                <el-table-column label="OD值" prop="od" width="160" show-overflow-tooltip> </el-table-column>
                                <el-table-column label="Cutoff值" prop="cutoff" show-overflow-tooltip> </el-table-column>
                              </el-table>
                            </div>
                            <el-divider content-position="left" style="border-top: 10px solid #f1f2f6"></el-divider>
                          </el-card>
                        </div>
                      </el-scrollbar>
                    </el-tab-pane>

                    <!-- <el-tab-pane label="操作">
                      <el-table v-loading="Oloading" row-key="id" :data="operationList" style="width: 100%" height="100%"
                        border>
                        <el-table-column label="操作日期" width="200" prop="completeDate" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" width="100" prop="stepName" show-overflow-tooltip> </el-table-column>
                        <el-table-column label="用户" width="100" prop="creator" show-overflow-tooltip> </el-table-column>
                        <el-table-column label="说明" prop="remark" show-overflow-tooltip> </el-table-column>
                      </el-table>
                    </el-tab-pane> -->
                  </el-tabs>
                </pane>
              </splitpanes>
            </pane>
          </splitpanes>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
import { AppStore } from '../../../stores/store';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { IsEmpty, DateToString, formatDateTime } from '@/utils/common';
import SelectDataCheckedList from '@/components/SelectMultDataGrid.vue';
import SelectDataList from '@/components/SelectDataList.vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { VXETable } from 'vxe-table';
//import PopoverSelection from '@/components/PopoverSelection.vue'

let testArr = reactive([1, 2, 3]);

let store = AppStore();
let { proxy }: any = getCurrentInstance();
// private datePickerOpts = DatePickerOpts;
// private userInfo = $store.state.userInfo;
let Floading = ref(false); //查询form表单
let Sloading = ref(false); //标本列表
let Tloading = false; //跟踪记录
let Oloading = ref(false); //操作记录
let Rloading = ref(false); //检测结果
let specList: any[] = reactive([]); //标本列表
let specAllList: any[] = reactive([]); //标本列表
let traceRecList = []; //跟踪记录
let stepList = reactive([]); //跟踪记录对象
// let operationList = reactive([]); //操作记录
let specResult: any[] = reactive([]); //标本检测结果
let pickerOpts = ref({
  shortcuts: [
    {
      text: '今天',
      onClick(picker) {
        picker.$emit('pick', new Date());
      }
    },
    {
      text: '昨天',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit('pick', date);
      }
    },
    {
      text: '一周前',
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', date);
      }
    }
  ]
});
let timeTyptList = [
  { value: '1', label: '申请时间+签收时间' },
  {
    value: '2',
    label: '申请时间'
  },
  {
    value: '3',
    label: '签收时间'
  }
];
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
let form = ref({
  id: null, //标本id
  reqNo: '',
  patNo: '', //病历号
  bedNo: '', // 床号
  patNa: '',
  reqDept: '',
  reqDeptName: '',
  reqDeptNa: '',
  patType: '', //病人类型
  patTypeName: '',
  stateNa: '', //病人类型
  state: '',
  timeType: '1',
  startTime: formatDateTime(new Date(), 'yyyy-MM-dd 00:00:00'),
  endTime: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59'), //申请开始时间、结束时间
  pageIndex: page.currentPage,
  pageSize: page.pageSize
});
let orgId = ref('');
const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    }
  }
];
// 页面加载时更新报告单元/字典
onMounted(() => {
  orgId.value = store.userInfo.orgId;
  getSpecList();
});
// 停用的行 红色背景高亮
const rowStyle = ({ row, rowIndex }) => {
  if (row.isStop) {
    return {
      backgroundColor: '#ffd5d5',
      color: 'red'
    };
  }
};
// 条数/页

//点击每页数量
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  getSpecList();
}

// 日期选择事件
// function timeSelectChange() {
//   handleSearch();
// }
function keyupEnter(e: any) {
  getSpecList();
}
// 查询
function handleSearch() {
  page.currentPage = 1;
  getSpecList();
}

function exportExcelReport(dom, title = '条码跟踪信息') {
  specAllList.length = 0;
  const url = '/lab/reqMain/exportReqExcel';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: form.value })
    .then((res: any) => {
      if (!IsEmpty(res.data)) {
        specAllList.push(...res.data);
        exportData();
      }
    })
    .catch((err: any) => {
      Sloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}
function exportData() {
  const $table = proxy.$refs.supplierTableRef as any;
  $table.exportData({ data: specAllList, type: 'csv', filename: '条码状态跟踪', useStyle: true });
}

// 查询标本信息列表
function getSpecList() {
  form.value.pageIndex = page.currentPage;
  form.value.pageSize = page.pageSize;
  Sloading.value = true;
  specList.length = 0;
  const url = '/lab/reqMain/findLabReqMainList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: form.value })
    .then((res: any) => {
      specList.push(...res.data.records);
      //Object.assign(specList, res.data.records);
      page.totalResult = res.data.total;
      Sloading.value = false;
      supplierRowClick({ row: specList[0], rowIndex: 0 }); //默认选中第一条数据
    })
    .catch((err: any) => {
      Sloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
  // const data = {
  //   specCode: form.specCode,
  //   medicalRecNo: form.medicalRecNo,
  //   bedCode: form.bedCode,
  //   name: form.name,
  //   depId: form.depId,
  //   visitTypeId: form.visitTypeId,
  //   applicationDateS: form.applicationTime.startTime,
  //   applicationDateE: form.applicationTime.endTime
  // };
  // axios
  //   .get(url, { params: data })
  //   .then((res: any) => {
  //     specList = res;
  //     if (specList.length > 0) {
  //       specRowClick(specList[0]);
  //     } else {
  //       traceRecList.length = 0 //跟踪记录
  //       operationList.length = 0; //操作记录
  //       specResult.length = 0; //标本检测结果
  //     }
  //     Sloading.value = false;
  //   })
  //   .catch((err) => {
  //     Sloading.value = false;
  //     proxy.$alert(err.data.error.message, '提示');
  //   });
}
// 行点击事件
function supplierRowClick({ row, rowIndex }: any) {
  (proxy.$refs.supplierTableRef as any).setCurrentRow(row);
  // specResult.length = 0;
  //specList.length = 0;
  //form.value.id = row.id;
  //form.value.reqNo = row.reqNo;
  getTraceRecList({ row });
  getSpecResult({ row });
}

// 获取检验项目
function getSpecResult({ row }) {
  Sloading.value = true;

  const url = '/lab/rptResult/getSpecResult';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { reqNo: row.reqNo } })
    .then((res: any) => {
      specResult.length = 0;
      specResult.push(...res.data);
      Sloading.value = false;
    })
    .catch((err: any) => {
      Sloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

// 获取跟踪记录
function getTraceRecList({ row }) {
  stepList.length = 0;
  // operationList.length = 0;

  Tloading = true;
  const url = '/lab/mainState/getTraceRecTwoList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { id: row.id, reqNo: row.reqNo }
    })
    .then((res: any) => {
      Tloading = false;
      stepList.push(...res.data);
      // if (!IsEmpty(stepList)) {
      //   for (let step of stepList) {
      //     if (step.completed === true) {
      //       // 当 completed 等于 true 时，将值放入 operationList 中
      //       operationList.push(step);
      //     }
      //   }
      //   console.log('-----------------------', operationList);
      // }
    })
    .catch((err: any) => {
      Tloading = false;
      proxy.$alert('获取流程节点失败', '提示');
    });
}
// 获取操作记录
// function getOperationList() {
//   operationList.length = 0
//   Oloading.value = true;
//   const url = '/lab/mainState/getOperationList';
//   proxy.$http
//     //注意此处的数据条数
//     .get(url, {
//       params: { id: form.value.id, reqNo: form.value.reqNo }
//     })
//     .then((res: any) => {
//       Oloading.value = false;
//       operationList.push(...res.data);
//     })
//     .catch((err: any) => {
//       Oloading.value = false;
//       proxy.$alert('获取流程节点失败', '提示');
//     });
// }
function clearDeptName() {
  form.value.reqDept = '';
  form.value.reqDeptName = '';
}

function clearStateNa() {
  form.value.state = '';
  form.value.stateNa = '';
}

function clearPatTypeName() {
  form.value.patType = '';
  form.value.patTypeName = '';
}
function SelectRowDeptClick(e: any) {
  form.value.reqDept = e.code;
  form.value.reqDeptName = e.name;
}

function SelectStateClick(e: any) {
  form.value.state = e.code;
  form.value.stateNa = e.nodeName;
}

function SelectRowClick(e: any) {
  form.value.patType = e.code;
  form.value.patTypeName = e.name;
}
//#region  【组件】弹框选择
//let visibleBydep = ref(false); //科室
//let depRequestUrl = '/api/hrms/deps';
//let visibleByvisitType = ref(false); //病人类型
//let visitTypeRequestUrl = '/api/his/visit-types';
let enterIndex = 0;
//确定选择
function ConfirmByClick(row, name) {
  if (!IsEmpty(name)) {
    form[name + 'Id'] = row.id;
    form[name + 'Name'] = row.name;
  }

  const ele: any = proxy.$refs[name + 'InputElemt'];
  ele.focus();
  proxy.$refs['visibleBy' + name] = false;
}

//选择输入框获取焦点
// function showDataBySelect(name) {
//   enterIndex = 0;
//   const ele: any = proxy.$refs[name + 'CompElemt'];
//   ele.pageIndex = 1;
//   ele.selectedItem.name = '';
//   ele.findList();
// }

// 输入框点击叉号清除
function clearValue(name) {
  form[name + 'Id'] = null;
  form[name + 'Name'] = '';
}
//#endregion
</script>

<style lang="scss" scoped>
#specTraceRec {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      .el-form {
        padding-top: 15px;
      }

      .tableBox {
        height: calc(100% - 32px);
      }

      .el-card {
        width: calc(100% - 10px);
        height: 100%;
        border: none;

        :deep(.el-card__body) {
          padding: 5px 10px 0 10px;
          width: calc(100% - 20px);
          height: calc(100% - 5px);
        }
      }

      .el-tabs {
        height: 100%;
        border: none;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px);
          padding: 0;

          .el-tab-pane {
            height: 100%;
          }
        }

        .el-table {
          th,
          td {
            padding: 2px;
          }
        }

        .el-table {
          :deep(.el-table__inner-wrapper) {
            height: 100% !important;
          }
        }
      }
    }
  }
}
</style>
